import React, { useEffect } from 'react';
import { Form, Input, Button, Row, Col, message } from 'antd';
import { useLoginState } from './loginState';
import yayJpg from "../../assets/img.png";
import config from "../../config/config";
import styles from './Login.less';

const FormItem = Form.Item;

const LoginPage = () => {

    const {
        authImageCode, load_auth_code, loginUser
    } = useLoginState();

    const [form] = Form.useForm();
    const { getFieldsValue, validateFields, setFieldsValue, resetFields } = form;

    useEffect(() => {
        load_auth_code();
        setFieldsValue(authImageCode);
    }, []);

    const formItemLayout = {
        labelCol: { span: 3 },
        wrapperCol: { span: 21 }
    }

    const onLogin = () => {
        validateFields().then(values => {
            let authCodeImageDom = document.getElementById("authCodeImageInput");
            if (authCodeImageDom.value != authImageCode.image_text) {
                message.error("验证码输入有误");
                return;
            }
            loginUser(values);
        }).catch(error => {
            const errors = error.errorFields;
            for (let i = 0; i < errors.length; i++) {
                console.log("LoginPage Error => " + errors[i].name[0] + " ===>>> " + errors[i].errors[0]);
            }
        });
    }

    return (
        <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "row" }}>
            <div style={{ background: config.global_gray }}>
                <img src={yayJpg} width={window.innerWidth / 2} height={window.innerHeight - 5} />
            </div>
            <div style={{ flex: 1, textAlign: "center" }}>
                <div style={{ width: 400, margin: "25% 0px 0px 30%", border: "1px solid #d9d9d980", padding: "60px 0px 80px 30px", borderRadius: "20px", background: "#ffffff" }}>
                    <div style={{ fontSize: 22, padding: "0px 0px 35px 0px" }}>
                        欢迎使用{config.name}
                    </div>
                    <Form form={form} {...formItemLayout} className={styles.login_item_label}>
                        <FormItem label="用户名" name="user_name">
                            <Input placeholder={"请输入用户名"} style={{ width: '80%', height: "40px" }} />
                        </FormItem>
                        <FormItem label="密码" name="password">
                            <Input placeholder={"请输入密码"} style={{ width: '80%', height: "40px" }} />
                        </FormItem>
                        <FormItem label="验证码">
                            <div style={{ display: "flex", flexDirection: "row" }}>
                                <Input id="authCodeImageInput" placeholder={"请输入验证码"} style={{ width: '45%', height: "40px", marginLeft: "34px" }} />
                                <img src={"data:image/png;base64," + authImageCode.image_base64} style={{ height: "38px", marginLeft: "14px", border: "1px solid #d9d9d9" }} onClick={() => load_auth_code()} />
                            </div>
                        </FormItem>
                    </Form>
                    <Row>
                        <Col span={24}>
                            <Button type="primary" style={{ width: "91%", height: "40px", marginLeft: "-32px" }} onClick={() => onLogin()}>登录</Button>
                        </Col>
                    </Row>
                </div>
            </div>
        </div>
    )
}

export default LoginPage;
